<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
        <div class="container">

            <div>
                <h3>按钮生成的3中方式</h3>
                <button class="btn btn-success">Button btn-success按钮</button>
                <input type="button" class="btn btn-info" value="Input btn-info按钮">
                <a href="#" class="btn btn-danger">a btn-danger按钮</a>
            </div>

            <div>
                <h3>按钮的尺寸</h3>
                <h5>大，中，小，块级</h5>
                <button class="btn btn-success btn-lg">按钮</button>
                <input type="button" class="btn btn-info btn-sm" value="按钮">
                <a href="#" class="btn btn-danger btn-xs">按钮</a>
                <button class="btn btn-primary btn-block">按钮</button>
            </div>

            <div>
                <h3>按钮组</h3>
                <div class="btn-group">
                    <button class="btn btn-primary">按钮1</button>
                    <button class="btn btn-primary">按钮2</button>
                    <button class="btn btn-primary">按钮3</button>
                </div>
            </div>

            <div>
                <h3>下拉菜单按钮组</h3>
                    <div class="dropdown">
                        <div class="dropdown">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" id="drop1">
                                下拉一<span class="caret"></span>
                            </button>
                            <button type="button" class="btn btn-primary" data-toggle="dropdown" id="drop2">
                                下拉二<span class="caret"></span>
                            </button>
                            <button type="button" class="btn btn-primary" data-toggle="dropdown" id="drop3">
                                下拉三<span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="drop1">
                                <li>
                                    <a href="#">下拉一</a>
                                </li>
                                <li>
                                    <a href="#">下拉一</a>
                                </li>
                                <li>
                                    <a href="#">下拉一</a>
                                </li>
                            </ul>
                            <ul class="dropdown-menu" aria-labelledby="drop2">
                                <li>
                                    <a href="#">下拉二</a>
                                </li>
                                <li>
                                    <a href="#">下拉二</a>
                                </li>
                                <li>
                                    <a href="#">下拉二</a>
                                </li>
                            </ul>
                            <ul class="dropdown-menu" aria-labelledby="drop3">
                                <li>
                                    <a href="#">下拉三</a>
                                </li>
                                <li>
                                    <a href="#">下拉三</a>
                                </li>
                                <li>
                                    <a href="#">下拉三</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
</body>
</html>